<template>
    <basic-container>
        <el-table :data="directIndentlist" :span-method="arraySpanMethod" ref="tableELe" style="width: 100%;" size="small">
            <el-table-column label="钢种" align="center" prop="marterialName" min-width="100"></el-table-column>
            <el-table-column label="化学元素" align="center" prop="batch" min-width="180">
                <el-table-column label="" align="center" prop="batch" min-width="90"></el-table-column>
                <el-table-column label="" align="center" prop="description" min-width="90"></el-table-column>
            </el-table-column>
            <el-table-column v-for="(item, index) in dynamicField" :key="index" :label="item" align="center" :prop="item"
                min-width="70"></el-table-column>

        </el-table>

    </basic-container>
</template>
   
<script>
export default {
    data() {
        return {
            directIndentlist: [],
            dataList: [],
            dynamicField: ['C', 'Si', 'Mn','P']
        }
    },
    created() {
        let data = {
            "code": 200,
            "msg": "000",
            "data": {
                "total": 5,
                "rows": [
                    {
                        "batch": "标准成分",
                        "marterialName": "D456",
                        "description": null,
                        "C": 0.4,
                        "Si": 1.8,
                        "Mn": 2.2,
                        'P':0.008
                    },
                    {
                        "batch": "标准成分",
                        "marterialName": "D456",
                        "description": null,
                        "C": 0.45,
                        "Si": 2,
                        "Mn": 2.6,
                        'P':0.009
                    },
                    {
                        "batch": "内控成分",
                        "marterialName": "D456",
                        "description": null,
                        "C": 0.42,
                        "Si": 1.85,
                        "Mn": 2.3,
                        'P':0.006
                    },
                    {
                        "batch": "内控成分",
                        "marterialName": "D456",
                        "description": null,
                        "C": 0.43,
                        "Si": 1.95,
                        "Mn": 2.5,
                        'P':0.007
                    },
                    {
                        "batch": "",
                        "marterialName": "配料成分",
                        "description": "目标成分",
                        "C": 0.43,
                        "Si": 1.95,
                        "Mn": 2.5,
                        'P':0.0065
                    },
                    {
                        "batch": "",
                        "marterialName": "配料成分",
                        "description": "12400",
                        "C": 0.43,
                        "Si": 1.95,
                        "Mn": 2.5
                    },
                    {
                        "batch": "批号",
                        "marterialName": "成分",
                        "description": "",
                    },
                    {
                        "batch": "Cr-230701",
                        "marterialName": "金属铬",
                        "description": null,
                        "C": 0.98,
                        "Si": 0.55,
                        "Mn": 10.2,
                        'P':0.001
                    }, {
                        "batch": "Cr-230701",
                        "marterialName": "金属铬",
                        "description": null,
                        "C": 10.5,
                        "Si": 5.8,
                        "Mn": 99,
                        'P':0.0005
                    }, {
                        "batch": "Ni-230701",
                        "marterialName": "镍板",
                        "description": null,
                        "C": 0.78,
                        "Si": 0.45,
                        "Mn": 6.2,
                        'P':0.00004
                    }, {
                        "batch": "Ni-230701",
                        "marterialName": "镍板",
                        "description": null,
                        "C": 5.78,
                        "Si": 3.45,
                        "Mn": 9.24,
                        'P':0.0002
                    }],
                "code": 200,
                "msg": "查询成功"
            },
            "expandData": {}
        };
        var orderNo = '5c76fd07-7934-45ec-b668-e80d761cffc9';
        this.http.post(`api/IngredientList/GetIngredientListInfo/${orderNo}`, null, true)
      .then((x) => {
        if (!x.status) return this.$message.error(x.message);
        this.dynamicField = x.data.varField
        this.formatTableData(x.data.data)
        
        // 获取动态列
        var dataList = this.directIndentlist[0].dataList;
        this.dataList = dataList;
      });
        // 组装数据
        //this.formatTableData(data.data.rows)


        //console.log("directIndentlist", this.directIndentlist, this.dataList);
    },
    updated() {
        if (this.$refs.tableELe && this.$refs.tableELe.doLayout) {
            this.$refs.tableELe.doLayout();
        }
    },
    methods: {   
        //自定义列显示的数据
        dataFormatter(row, index, prop) {
            if (row && row.dataList && row.dataList[index]) {
                var value = row.dataList[index][prop];
                return value;
            }
        },
        // 格式化表格数据
        formatTableData(tableData) {
            this.directIndentlist = [];
            tableData.forEach(item => {
                console.log(item)
                this.directIndentlist.push(item)
                //this.directIndentlist.push(total);
                //   this.directIndentlist.push(total2);
                //   this.directIndentlist.push(total3);
            })
            this.getSpanArr(this.directIndentlist)
            this.getSpanArr2(this.directIndentlist)
            //this.getSpanArr3(this.directIndentlist)
        },
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0 || rowIndex === 1) {

                console.log('arraySpanMethod',row,column,rowIndex,columnIndex);
                if(columnIndex == 0)
                    return [4,1]
                // if (columnIndex === 1)
                //     return [2, 2];
                return [1,1];
            }

        },
        //合并行列
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {           
            if (columnIndex === 0) {
                const _row = this.spanArr[rowIndex];
                let _col = _row > 0 ? 1 : 0;
                if (rowIndex < 6){
                    if (rowIndex >= 4 )
                    _col = 2;
                }
                return {
                    rowspan: _row,
                    colspan: _col
                }
            } else if (columnIndex === 1) {
                const _row = this.spanArr2[rowIndex];
                let _col = _row > 0 ? 1 : 0;                
                if (rowIndex < 6){
                    if (rowIndex >= 4 )
                        _col = 0;
                    else if(rowIndex %2 ===0 )
                        _col = 2;

                }
                return {
                    rowspan: _row,
                    colspan: _col
                }
            } 
            else if (columnIndex === 2){
                if(rowIndex < 4 )
                        
                return {
                    rowspan: 0,
                    colspan: 0
                }
            }
        },
        //统计要合并的行（根据客户合并）
        getSpanArr(data = []) {
            this.spanArr = []
            for (var i = 0; i < data.length; i++) {
                if (i === 0) {
                    this.spanArr.push(1);
                    this.pos = 0
                } else {
                    // 判断当前元素与上一个元素是否相同
                    if (data[i].marterialName === data[i - 1].marterialName) {
                        this.spanArr[this.pos] += 1;
                        this.spanArr.push(0);
                    } else {
                        this.spanArr.push(1);
                        this.pos = i;
                    }
                }
            }
            //console.log('spanArr:', this.spanArr)
        },
        //统计要合并的行（根据销售类型合并）
        getSpanArr2(data = []) {
            this.spanArr2 = []
            for (var i = 0; i < data.length; i++) {
                if (i === 0) {
                    this.spanArr2.push(1);
                    this.pos = 0
                } else {
                    // 判断当前元素与上一个元素是否相同
                    if (data[i].batch === data[i - 1].batch) {
                        this.spanArr2[this.pos] += 1;
                        this.spanArr2.push(0);
                    } else {
                        this.spanArr2.push(1);
                        this.pos = i;
                    }
                }
            }
            //console.log('spanArr2:', this.spanArr2)
        },
        //统计要合并的行（根据物品名称）
        getSpanArr3(data = []) {
            this.spanArr3 = []
            for (var i = 0; i < data.length; i++) {
                if (i === 0) {
                    this.spanArr3.push(1);
                    this.pos = 0
                } else {
                    // 判断当前元素与上一个元素是否相同
                    if (data[i].invtId === data[i - 1].invtId) {
                        this.spanArr3[this.pos] += 1;
                        this.spanArr3.push(0);
                    } else {
                        this.spanArr3.push(1);
                        this.pos = i;
                    }
                }
            }
            console.log('spanArr3:', this.spanArr3)
        },
    }
};
</script>
   
<style>
.el-table__header-wrapper tr th,
.el-table__body-wrapper .el-table__row td {
    border: 1px solid #EBEEF5 !important;
}
</style>